import React, { Component, PropTypes } from 'react';
import { Table, Checkbox, Icon } from 'antd';
import classNames from 'classnames'
class OrderItem extends Component {

    static propTypes = {
        data:PropTypes.object,
    };
    static defaultProps = {
        data:{},
        disabled:false,//checkbox是否可选
        checkAll:false,//是否存在全选复选框
        header:()=>{}//列头渲染
    }
    constructor(props) {
        super(props);

        this.state = {
            open:false
        }
    }
    render() {

        const { children, data, header, columns, checkAll, hideKey } = this.props;

        const { open } = this.state;

        const openState = classNames('order-list-item-bd', { open });

        return (
            <div className="order-list-item">
                <div className="order-list-item-hd">
                    {checkAll ? this.renderCheckbox() : null}
                    {header(data)}
                </div>
                <div className={openState}>
                    <Table 
                        showHeader={false}
                        pagination={false}
                        columns={columns}
                        dataSource = {[data]}
                    />
                </div>
            </div>
        );
    }
    /**
     * this.renderHideMore(data,hideKey)
     */
    renderHideMore = (record, prop) => {

        const { open } = this.state;

        if(!prop || !record[prop]){
            return null;
        }
        return (
                record[prop].length > 1
                    ? (<a href="javascript:void(0);">
                            <Icon 
                                className="list-ct t-grayer"
                                type={open ? 'up' : 'down'} 
                                onClick={this.showMore} />
                        </a>
                    )
                    : null
        )
    }

    renderCheckbox = () => {
        const { data, checked, eventIndex, disabled } = this.props;
        return (
            <Checkbox 
                disabled={disabled}
                checked={checked}
                onChange={() => { this.handleSelect(data,checked, eventIndex) }} 
            />
        )
    }

    handleSelect = (data, checked, index) => {
        this.props.onSelect(data, !checked, index);
    }

    /**
     * 展示更多商品信息
     */
    showMore = () => {
        this.setState({
            open: !this.state.open
        })
    }
}



export default OrderItem;